import React from 'react'
import styles from './index.module.scss'
import {Flex} from 'antd-mobile'
import {Link, withRouter} from 'react-router-dom'
import classNames from 'classnames'

function SearchBar ({history, cityName, className}) {
  return (
    <Flex className={classNames(styles.root, className)}>
      <Flex className={styles.searchLeft}>
        <div 
        onClick={()=> history.push('/citylist')}
        className={styles.location}>
          <span>{cityName}</span>
          <i className='iconfont icon-arrow'></i>
        </div>
        <div className={styles.searchForm}>
          <i className='iconfont icon-search'></i>
          <span>请输入小区或地址</span>
        </div>
      </Flex>
      <i className='iconfont icon-map' onClick={()=>history.push('/map')}></i>
    </Flex>
  )
}
// 不是一级路由组件，拿不到history，必须高阶组件withRouter包一下
export default withRouter(SearchBar)